<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/animate.js"></script>
    <script src="../font/iconfont.js"></script>
    <style>
        :root {
            --cool: #40C5F1;
            --hot: #f00;
            --grey: #423029;
            --light: #C3D0DF;
        }

        .carousel {
            /* width: 1226px; */
            /* height: 460px; */
            /* margin: 50px auto; */
            position: relative;
            overflow: hidden;
        }

        .nav {
            display: flex;
            line-height: 40px;
            text-align: center;
            position: absolute;
            right: 5%;
            bottom: 10%;
            z-index: 99999;
        }

        .nav li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 0 5px;
            flex: 1;
            background-color: var(--light);
            /* border: 1px solid var(--grey); */

        }

        .nav .active {
            background-color: var(--cool);
            color: #fff;
        }

        .slide-carousel {
            width: 500%;
            overflow: hidden;
            position: relative;
            left: 0;
        }

        .slide-carousel .slide-item {
            width: 20%;
            float: left;
        }

        .slide-carousel .slide-item img {
            width: 100%;
        }

        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .carousel .prev,
        .carousel .next {
            width: 50px;
            height: 50px;
            /* background-color: rgba(0,0,0,0.5); */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 99;
            display: none;
        }

        .carousel .prev .icon,
        .carousel .next .icon {
            width: 100%;
            height: 100%;
        }

        .carousel .prev {
            left: 10px;
        }

        .carousel .next {
            right: 10px;
        }

        .one {
            width: 400px;
        }
    </style>
</head>

<body>
    <div class="carousel one">
        <div class="prev">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuo1"></use>
            </svg>
        </div>
        <div class="next">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-you2"></use>
            </svg>
        </div>
        <ul class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="slide-carousel">
            <div class="slide-item"><a href="https://www.baidu.com"><img src="../images/1.jpg" alt=""></a></div>
            <div class="slide-item"><a href="https://www.jd.com"><img src="../images/2.webp" alt=""></a></div>
            <div class="slide-item"><a href="https://www.taobao.com"><img src="../images/3.webp" alt=""></a></div>
            <div class="slide-item"><a href="https://www.bilibili.com"><img src="../images/4.webp" alt=""></a></div>
            <div class="slide-item"><a href="https://www.bilibili.com"><img src="../images/1.jpg" alt=""></a></div>
        </div>
    </div>
    <!-- <div class="carousel two">
        <div class="prev">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuo1"></use>
            </svg>
        </div>
        <div class="next">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-you2"></use>
            </svg>
        </div>
        <ul class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="slide-carousel">
            <div class="slide-item"><a href="https://www.baidu.com"><img src="../images/1.jpg" alt=""></a></div>
            <div class="slide-item"><a href="https://www.jd.com"><img src="../images/2.webp" alt=""></a></div>
            <div class="slide-item"><a href="https://www.taobao.com"><img src="../images/3.webp" alt=""></a></div>
            <div class="slide-item"><a href="https://www.bilibili.com"><img src="../images/4.webp" alt=""></a></div>
            <div class="slide-item"><a href="https://www.bilibili.com"><img src="../images/1.jpg" alt=""></a></div>
        </div>
    </div> -->
</body>
<script>
    function Carousel(selector) {
        // {}
        // this -> {}
        // this[[Prototype]] = Carousel.prototype;
        this.carousel = document.querySelector(selector);
        if (!this.carousel) {
            var err = new Error("No element is selected!");
            throw err;
        }

        this.init(); // 自动初始化

        // return this;
    }

    // 字面量对象
    Carousel.prototype = {
        constructor: Carousel,
        init: function () {
            this.getEle();
            this.dotClick();
            this.autoPlay();
            this.hover();
            this.pageSwitch();
        },
        getEle() {
            this.nav = this.carousel.getElementsByClassName("nav")[0];
            this.liList = this.nav.getElementsByTagName("li");
            this.slideCarousel = this.carousel.getElementsByClassName("slide-carousel")[0];
            this.listItems = this.carousel.querySelectorAll(".list-carousel .list-item");
            this.prev = this.carousel.getElementsByClassName("prev")[0];
            this.next = this.carousel.getElementsByClassName("next")[0];
            this.slideWidth = this.carousel.clientWidth;
            this.timer = null;
            this.index = 0;  // 全局变量记录轮播的下标
        },
        dotClick: function () {
            var _this = this;
            for (let i = 0; i < this.liList.length; i++) {
                let li = this.liList[i];
                li.onclick = function () {
                    console.log(i);

                    _this.index = i;

                    for (var j = 0; j < _this.liList.length; j++) {
                        _this.liList[j].className = "";
                    }
                    _this.liList[i].className = "active";

                    animate(_this.slideCarousel, "left", -_this.slideWidth * i, "ease-out", function () {
                        console.log("本次运动完毕");
                    })
                }
            }
        },
        hover: function () { // this -> obj
            var _this = this;
            this.carousel.onmouseenter = function () {
                clearInterval(_this.timer);
                _this.prev.style.display = "block";
                _this.next.style.display = "block";
            }
            this.carousel.onmouseleave = function () {
                _this.prev.style.display = "none";
                _this.next.style.display = "none";
                _this.autoPlay();
            }
        },
        pageSwitch() {
            var _this = this;
            this.prev.onclick = function () {
                _this.index--;
                _this.step();
            }

            this.next.onclick = function () {
                _this.index++;
                _this.step();
            }
        },
        autoPlay() { // this -> obj
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                this.index++; // 0 1 2 3 4
                this.step();
            }, 3000);
        },
        step() {
            // 左键连点 => 左键下标最小值为0(第一张) => 如何让其平滑滚动到第四张 ?
            // 第一张  瞬间切到第五张之后   滚动到  第四张
            if (this.index < 0) { // 如何让第一张平滑滚动到第四张 ?
                this.index = this.liList.length;  // 第五张下标
                this.slideCarousel.style.left = - this.slideWidth * this.index + "px";  // 瞬间切到第五张之后 
                this.index--;  // 滚动到  第四张
            }


            // next连续点击 => animate函数重复触发 => 先清除上一个,在启动当前 => 回调函数不会触发
            // => 连续点击 => 临界判断优化处理

            // 解析: next连续点击 => 图片最多只能滚动到第五张(看起来同第一张 -> 临界值) -> 此时再点击应该滚动到第二张 => 如何滚动第二张

            // 超出第五张瞬间切换到第一张   滚动到  第二张

            if (this.index > this.liList.length) { // index > 4 => 超出第五张
                this.slideCarousel.style.left = 0;  // 第五张瞬间切换到第一张
                this.index = 0;                 // 第一张对应下标
                this.index++;                   // 滚动到第二张
            }


            for (var j = 0; j < this.liList.length; j++) {
                this.liList[j].className = "";
            }
            var activeIndex = this.index >= this.liList.length ? 0 : this.index;
            this.liList[activeIndex].className = "active";

            animate(this.slideCarousel, "left", -this.slideWidth * this.index, "ease-out", () => {
                // console.log("本次运动完毕");
                // // 回调函数 =>  每次运动完毕 判断是否是第五张对应的下标
                if (this.index >= this.liList.length) {
                    this.slideCarousel.style.left = 0;
                    this.index = 0;
                }
            })
        }
    }

    new Carousel(".one");
    new Carousel(".two");








</script>

</html>